<template>
    <div id="detail" :style="`height:${height}`">
        <van-image-preview v-model="isPreview" :images="item.imgs" :startPosition="index">
        </van-image-preview>
        <van-panel style="font-size: 16px;color: #9393e9;">
            <div>
                <van-grid :column-num="3" :border="false">

                    <van-grid-item use-slot v-for="(img,index) in item.imgs" :key="index">
                        <van-image
                        width="100"
                        height="100"
                        :src="img"
                        @click="preview(index)"
                        />
                    </van-grid-item>
                </van-grid>
            </div>
    <template #header>
        <p style="margin-left: .3rem;">{{item.qtItem}}</p>
        <p class="desc">{{item.createTime}}</p>
    </template>
        </van-panel>
        <div style="text-align: right;margin: 1rem .8rem 0rem 0rem">
        <van-button icon="chat-o" type="info" size="small" @click="openPanel('','')">我来回答</van-button>
        </div>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
            热点回答
        </van-divider>

        <div v-for="data in dataList" :key="data.id">
            <div class="bottom_head" >
                <van-image
                width="3rem"
                height="3rem"
                round
                :src="data.imageUrl"
                />
                <span style="margin: .6rem 0rem 0rem 1rem;">{{data.name}}</span>
            </div>

            <p class="content" @click="openPanel('',data.id,data.id)">{{data.content}}</p>

            <div class="fotter">
                <span style="font-size: 12px; color: #726e6e;">{{data.date}}</span>
                <!-- <van-button icon="good-job-o" type="info" size="mini" :color="data.useStatus?'red':''" @click="useFul(data.id)">{{data.useful}}</van-button> -->
                <van-icon name="good-job-o" size="20px" :color="data.useStatus?'red':''" @click="useFul(data.id)" :info="data.useful">
                     
                </van-icon>
               
            </div>
             <div style=" margin-left: 6rem; font-size: 12px;margin-top: .3rem;line-height: 20px;" v-for="item in data.req" :key="item.id" @click="openPanel(item.from,item.id,data.id,item.fromId)">
                 <a>{{item.from}}</a><span style="color:#948d8d" v-if="item.to==''||item.to==null?false:true"> 回复了 </span><a>{{item.to}}：</a><span>{{item.content}}</span>
            </div>
             <p class="listMore" @click="getMoreCommList(data.id)" :id=data.id><van-icon name="more-o" size="20px"/></p>

            <van-divider />
            

        </div>
        <p style=" font-size: 12px;text-align: center;color: #989090;" @click="more" v-show="showMore">查看更多</p>
           
            <van-action-sheet v-model="openInput" :round=false>
            <div> <van-field
                v-model="message"
                v-if="openInput"
                rows="1"
                autosize
                type="textarea"
                placeholder="回复"
               :autofocus=true
                maxlength="50"
                ref="Inp"
            >
            <template #button>
                <van-button size="small" type="primary" @click="resive">回复</van-button>
            </template>
            </van-field>
            </div>
            </van-action-sheet>
    </div>
</template>
<script>
import {getAnwser,getAnwserListRes,addAnwser,addAnwserRep,likeCount,likeCountSub,getLikeStatusById,getRequestionById} from '../../../request/mobile/home/request_home'
export default {
    data(){
        return{
            height:"",
            color:'',
            useful:0,
            status:false,
            dataList:[
            ],
           
            openInput:false,
            message:'',
            toName:'',
            anPageStart:0,
            anPageEnd:5,
            qtId:'',
            showMore:true,
            itemId:'none',
            rpId:'',
            userId:localStorage.getItem("userId"),
            comPageStart:0,
            comPageEnd:5,
            userName:localStorage.getItem("userName"),
            item:{
                qtItem:''
            },
            isPreview:false,
            index:0,
            toId:'',
            userImage:localStorage.getItem("userImage")
        }
        
    },
    methods:{
        getHeight(){
            this.height=window.innerHeight+"px"
            
        },
        useFul(id){
            
            for(var data in this.dataList){
                var thisData = this.dataList[data];
                if(thisData.id===id){
                    if(thisData.useStatus){
                        likeCountSub({rpId:id,lkId:localStorage.getItem(id),lkUserId:this.userId,lkPostId:thisData.userId}).then(res=>{
                            if(res.code==200){
                                 localStorage.removeItem(id)
                                 thisData.useful--;
                            }
                        })
                       
                    }else{
                        likeCount({rpId:id,lkUserId:this.userId,lkPostId:thisData.userId}).then(res=>{
                            if(res.code==200){
                                localStorage.setItem(id,res.data.lkId)
                                thisData.useful++;
                            }
                        })
                        
                    }
                    thisData.useStatus=!thisData.useStatus
                }
            }
           
        },
        resive(){
            this.openInput=!this.openInput
            if(this.itemId==''){
                //直接答案
                addAnwser({qtId:this.qtId,rpItem:this.message,userId:this.userId}).then(res=>{
                    if(res.code==200){
                        var date = new Date();
                        this.dataList.unshift({
                            id:3,
                            name:this.userName,
                            imageUrl:this.userImg,
                            content:this.message,
                            useStatus:false,
                            useful:0,
                            date:date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate(),
                            req:[]
                        })
                        this.message=''
                    }
                    else{
                        this.$Toast(res.msg)
                    }
                    
                })
                
            }else{
                addAnwserRep({userId:this.userId,cmItem:this.message,rpId:this.rpId,qtId:this.qtId,cmParentName:this.toName,cmParentId:this.toId})
                .then(res=>{
                    if(res.code==200){
                             for(var data in this.dataList){
                                    var item = this.dataList[data];
                                    if(item.id==this.rpId){
                                        item.req.push({
                                            id:3,
                                            from:this.userName,
                                            to:this.toName,
                                            content:this.message
                                        })
                                  }
                          }
                          this.message=""
                          this.toName=""
                          this.toId=''
                    }
                    else{
                        this.$Toast(res.msg)
                    }
                })
               
            }
            
        },
        openPanel(to,itemId,rpId,toId){
            this.itemId = itemId;
            this.toName = to;
            this.rpId = rpId;
            this.openInput=!this.openInput
            this.toId=toId;
        },
        more(){
            this.anPageStart=this.anPageEnd;
            this.anPageEnd+=10
            this.getAnwser()
        },

        getMoreCommList(id){
            this.comPageStart=this.comPageEnd;
            this.comPageEnd+=this.comPageEnd;
            //查询当前回答下面的评论
            getAnwserListRes({pageStart:this.comPageStart,pageEnd:this.comPageEnd,rpId:id})
            .then(res=>{
                if(res.code==200){
                    var data  = res.data;
                    if(data.length==0){
                      document.getElementById(id).style.display="none";
                    }
                    for(var index in data){
                        var item = data[index];
                        for(var i in this.dataList){
                            if(id==this.dataList[i].id){
                                this.dataList[i].req.push({
                                    id:item.cmId,
                                    from:item.userName,
                                    fromId:item.userId,
                                    to:item.cmParentName,
                                    content:item.cmItem,
                                    toId:item.cmParentId
                                })
                            }
                        }
                    }
                }else{
                    this.$Toast(res.msg)
                }
            })
        },

        //查询回答列表
        getAnwser(){
            getAnwser({pageStart:this.anPageStart,pageEnd:this.anPageEnd,qtId:this.qtId,userId:this.userId}).then(res=>{
                if(res.code==200){
                    //请求成功
                    var datas = res.data;
                    if(datas.length==0){
                        this.showMore=false;
                        return
                    }
                    for(var index in datas){
                        var data = datas[index]
                        this.dataList.push({
                            id:data.rpId,
                            name:data.userName,
                            imageUrl:'https://pett.oss-cn-beijing.aliyuncs.com/'+data.userImage,
                            content:data.rpItem,
                            useStatus:data.lkStatus,
                            useful:data.likeCount,
                            date:data.createTime,
                            userId:data.userId,
                            req:[],
                        })
                        for(var inx in data.commentList){
                            var it = data.commentList[inx];
                           this.dataList[this.dataList.length-1].req.push({
                            id:it.cmId,
                            from:it.userName,
                            fromId:it.userId,
                            to:it.cmParentIdName,
                            content:it.cmItem,
                            toId:it.cmParentId
                        })
                        }
                        
                        
                    }
                }else{
                    this.$Toast(res.msg)
                }
            })
        },

        preview(index){
            this.index=index;
            this.isPreview=!this.isPreview
        },

        getRequestionById(){
            getRequestionById({qtId:this.qtId}).then(res=>{
                if(res.code==200){
                   this.item = res.data
                   this.item.imgs = res.data.qtImage.split(',')
                    console.log(this.item)
                }else{
                    this.$Toast.fail(res.msg)
                }
            })
        }
    },
    created(){
       this.qtId = this.$route.params.id;
       console.log(this.$route)
        this.getHeight();
       this.getAnwser()
       this.getRequestionById()
    }
}
</script>
<style scoped>
#detail{
    background: white;
    overflow-y: scroll;
}
.bottom_head{
    display: flex;
    margin-left: 3rem;
}
.content{
        margin: .6rem 1rem 0rem 5rem;
        font-size: 13px;
}
.fotter{
    margin-left: 5rem;
    justify-content: space-between;
    display: flex;
    margin-right: 1rem;
    margin-top: .3rem;
}
.listMore{
    -webkit-text-size-adjust: none;
    text-align: right;
    color: rgb(152, 144, 144);
    margin-right: .8rem;
    margin-top: .1rem;
}
.desc{
    font-size: 13px;
    color: #8c8888;
    text-align: right;
    margin-right: .5rem;
}
</style>